第 3 步 - 向应用程序添加内容

在本教程的这一步骤中，向Home 节点添加更多内容，了解主页面 (Page Host) 节点如何处理其子页面节点的导航。

向Home 节点添加内容

在本节中，将页面 (Page) 节点Home 转换为主页面 (Page Host) 节点并再添加两个页面 (Page) 节点到Home 应用程序。

主页面 (Page Host) 节点会在自己的范围内跟踪当前激活的页面 (Page) 或主页面 (Page Host) 节点。当激活主页面 (Page Host) 节点时，主页面 (Page Host) 节点会在自己的范围内自动激活当前激活的页面 (Page) 或主页面 (Page Host) 节点。换言之，主页面 (Page Host) 节点会记住其状态并在激活期间将状态恢复到禁用前的状态。

要向Home 节点添加内容：

1. 在页面 (Pages) 中右键点击Home 节点并选择转换为主页面 (Convert to Page Host)。
   
2. 在页面 (Pages) 中Home 节点底部点击两下 ，在Home 节点下创建两个子页面 (Page) 节点，并命名为 Recent 和Favorite。
   
3. 从资产 (Assets) 拖到页面 (Pages) 窗口：
   • Recent 纹理到 Recent 节点
   • Favorite 纹理到 Favorite 节点
   
4. 在工程 (Project) 中选择图像 (Image) 节点Recent 和Favorite，在属性 (Properties) 中添加渲染变换 (Render Transformation) 属性，并设置渲染变换 (Render Transformation)平移 (Translation) 属性字段，以将图像 (Image) 节点放在应用程序用户界面中方向信息的旁边：
   • X 为 574
   • Y 为 148
   
5. 您在页面 (Pages) 窗口中选择 Recent 和 Favorite 节点时，可以在预览 (Preview) 中看到其内容。
   

为Recent 和Favorite 节点创建导航

在本节中，您将学习创建导航按钮，以便在主页面 (Page Host) 节点中的页面 (Page) 节点的Recent 和FavoriteHome。

要为Recent 和Favorite 节点创建导航：

1. 在工程 (Project) 中按下 Alt 并右键点击Home 节点，选择 2D 堆栈布局 (Stack Layout 2D)，在其中创建两个2D 按钮 (Button 2D) 节点并命名为 RecentButton 和 FavoriteButton。
   
2. 在页面 (Pages) 中点击Recent 节点，以便 Kanzi 迁移至该节点，在工程 (Project) 中选择 2D 堆栈布局 (Stack Layout 2D) 节点，在预览 (Preview) 中使用节点工具 (Node tool) 定位 2D 堆栈布局 (Stack Layout 2D) 节点，使其与Recent 按钮的左上角对齐。
   
   建议

   如果您未设置2D 堆栈布局 (Stack Layout 2D) 节点的大小，其子节点的大小决定节点大小。

   
   
   建议

   在 预览 (Preview) 中选择 节点工具 (Node tool) 并点击 禁用对齐到节点和参考线。
   禁用对齐时，您可以使用节点工具 (Node tool) 在预览 (Preview) 中移动节点，使其不对齐到节点或参考线。

   
3. 在工程 (Project) 中选择2D 堆栈布局 (Stack Layout 2D) > RecentButton 节点并使用节点工具 (Node tool) 重设大小并将其移到用户界面中Recent 按钮上方。
   
4. 在工程 (Project) 中选择RecentButton 节点，在节点组件 (Node Components) > 触发器 (Triggers) 部分的按钮: 点击 (Button:Click) 触发器中点击添加 (Add) 下拉菜单，选择导航至页面 (Navigate to Page) 动作，然后选择Recent 节点。
   
5. 为 FavoriteButton 节点重复上述两步，但将2D 按钮 (Button 2D) 节点放到用户界面中的 Favorite 按钮上方，将导航至页面 (Navigate to Page) 动作设到 Favorite 节点。
   
6. 在工程 (Project) 中选择Home 节点，并在属性 (Properties) 中将默认子页 (Default Subpage) 属性设为Recent。
   通过您在上一步骤中所作的默认子页 (Default Subpage) 属性设置和默认子页 (Default Subpage) 属性设置，您启动应用程序时，Kanzi 激活Applications > Home > Recent 节点。
   
7. 在预览 (Preview) 中点击 进入交互 (Interact) 模式。
   
8. 您点击预览 (Preview) 中的RecentButton 和FavoriteButton，转到 Recent 和 Favorite 节点。

另请参阅

要详细了解有关页面 (Page) 和主页面 (Page Host) 节点的信息，请参阅使用页面 (Page) 和主页面 (Page Host) 节点。

要了解有关使用状态机的更多信息，请参阅使用状态机。

要详细了解有关使用触发器和动作的信息，请参阅触发器。

要详细了解有关使用预览 (Preview) 工具的信息，请参阅 在 预览 (Preview) 中编辑您的应用程序。

打开导航